<script setup lang="ts">
// 方法1.
import type { Person } from '@/types/Person'

// 方法2.
// import type { Person } from '@/App.vue'
// {属性名:属性值}
// 接受父组件的数据
const list = defineProps<{
  data: Person[]
}>()
// console.log(list)
//{
// "data": [
//       {
//           "id": 1,
//           "name": "赵小云",
//           "age": 18
//       },
//       {
//           "id": 2,
//           "name": "刘蓓蓓",
//           "age": 19
//       },
//       {
//           "id": 3,
//           "name": "姜肖泰",
//           "age": 17
//       }
//   ]
// }
</script>

<template>
  <table class="my-table">
    <thead>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年纪</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in list.data" :key="item.id">
        <!-- <tr v-for="item in data" :key="item.id"> -->
        <!-- 渲染列表 -->
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>
          <!-- 具名插槽 -->
          <!-- 给 slot 标签, 以添加属性的方式传值  属性名="属性值"-->
          <!-- 传递的数据 包含 id 和 age -->
          <slot name="footer" :id="item.id" :age="item.age">
            <button>查看</button>
          </slot>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<style scoped>
.my-table {
  width: 450px;
  text-align: center;
  border: 1px solid #ccc;
  font-size: 24px;
  margin: 30px auto;
}

.my-table thead {
  background-color: #1f74ff;
  color: #fff;
}

.my-table thead th {
  font-weight: normal;
}

.my-table thead tr {
  line-height: 40px;
}

.my-table th,
.my-table td {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.my-table td:last-child {
  border-right: none;
}

.my-table tr:last-child td {
  border-bottom: none;
}

.my-table button {
  width: 65px;
  height: 35px;
  font-size: 18px;
  border: 1px solid #ccc;
  outline: none;
  border-radius: 3px;
  cursor: pointer;
  background-color: #ffffff;
  margin-left: 5px;
}
</style>
